<!DOCTYPE html>
<html lang="en">
<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../../../js/jquery.min.js"></script>
    <!-- This is the Javascript file of jqGrid -->
    <script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.-->
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>

    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/jquery-ui.css" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css"  href="../../../css/trirand/ui.jqgrid.css" />
    <meta charset="utf-8" />
    <title>jqGrid Export to CSV, PDF, Excel</title>
	<style>
	</style>
</head>
<body>

    <table id="jqGrid"></table>
		<div id="jqGridPager"></div>
	<button id="export">Print</button>


    <script type="text/javascript">

        $(document).ready(function () {
 $("#jqGrid").jqGrid({
        url: "data_1.json",
        datatype: "json",
        colModel: [
            { label: 'OrderID', name: 'OrderID', key: true, width: 75 },
            { label: 'Customer ID', name: 'CustomerID', width: 150 },
            { label: 'Order Date', name: 'OrderDate', width: 150, formatter : 'date', formatoptions :{srcformat:'Y-m-d H:i:s'}, datefmt : 'Y-m-d H:i:s' },
            { label: 'Freight', name: 'Freight', width: 150, summaryType: "sum" },
            { label:'Ship Name', name: 'ShipName', width: 150, align: 'right' }
        ],
        loadonce:true, // just for demo purpose
        width: 800,
        height: 250,
        rowNum: 50,
        rowList:[20,25,50],
        sortname: 'OrderID',
        pager: "#jqGridPager",
        viewrecords: true,
        //styleUI: "Bootstrap",
        grouping: true,
		//multiselect : true,
        groupingView: {
            groupField: ["ShipName"],
            groupColumnShow: [true],
            groupText: ["<b>{0}</b>"],
            groupOrder: ["asc"],
            groupSummary: [true],
            groupCollapse: false
        }
    });

			$("#export").on("click", function(){
				$("#jqGrid").jqGrid("exportToHtml",{
					includeLabels : true,
					includeGroupHeader : true,
					includeFooter: true,
					autoPrint : true
				});
			});
        });

    </script>

    <!-- This code is related to code tabs -->
    <br />
    <span style="font-size: 12px; font-family: Tahoma">Click on the Tabs below the see the relevant code for the example:</span>
    <br /><br />
    <div id="codetabs" style="width:700px; height: 400px; font-size:65%;"></div>
    <script type="text/ecmascript" src="../../../js/jquery-ui.min.js"></script>
    <script type="text/ecmascript" src="../../../js/prettify/prettify.js"></script>
    <link rel="stylesheet" href="../../../css/prettify.css" />
        <script type="text/ecmascript" src="../../../js/codetabs.js"></script><script type="text/ecmascript" src="../../../js/themeswitchertool.js"></script>

    <script type="text/javascript">

        var tabData =
            [
                { name: "HTML", url: "index.html", lang: "lang-html" },
                { name: "Data.JSON", url: "data.json", lang: "lang-json" },
				{ name: "Description", url: "description.html", lang: "lang-html" },
            ];

        codeTabs(tabData);

    </script>
    <!-- End of code related to code tabs -->
</body>
</html>
